<script setup lang="ts">
import {ref} from "vue";
import {Toast} from "vant";
import {useRouter} from "vue-router";
import myAxios from "../plugins/myAxios.ts";

const initFormData = {
  "delFlag": 0,
  "description": "",
  "expireTime": "",
  "id": 0,
  "maxNum": 0,
  "status": 0,
  "teamName": "",
  "avatarUrl": "",
  "teamOwnerId": 0,
  "teamPassword": ""
}

const addTeamData = ref({...initFormData})

const  router = useRouter();

const avatarFile = ref()

const ImgUploadFile = async (params: any) => {
  // 要把数据变成file格式
  const formData = new FormData(); // 下面有备注
  formData.append('file', params);
  console.log(formData)
  return await myAxios.post('/file/upload', formData, {
    headers: {
      // 注意修改请求头file格式
      'Content-Type': 'multipart/form-data',
    },
  });
};

const afterRead = async (file : any) => {
  // 返回图片信息
  console.log(file);
  const uploadUrl = await ImgUploadFile(file.file)
  if(uploadUrl.data){
    console.log("uploadUrl",uploadUrl.data);
    addTeamData.value.avatarUrl =  uploadUrl.data.fileName;
  }else {
    Toast.fail('上传失败')
  }

};

const onSubmit = async () => {
  const postData ={
    ...addTeamData.value,
    status: Number(addTeamData.value.status)
  }
  const res = await myAxios.post('/team/create', postData)
  if (res.code === 0) {
    Toast.success('创建队伍成功')
    router.push({
      path: '/team',
      replace: true
    })
  } else {
    Toast.fail(res.message)
  }
};


const showPicker = ref(false);
const currentDate = new Date();

</script>

<template>
  <div id="teamCreatePage">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
            v-model="addTeamData.teamName"
            name="teamName"
            label="队伍名称"
            placeholder="队伍名称"
            :rules="[{ required: true, message: '请填写队伍名称' }]"
        />

        <van-field
            v-model="addTeamData.description"
            rows="1"
            autosize
            label="队伍描述"
            type="textarea"
            placeholder="请输入队伍描述"
        />
<!--

        <van-field
            v-model="addTeamData.avatarUrl"
            name="avatarUrl"
            label="队伍头像"
            placeholder="请填写队伍头像链接"
            :rules="[{ required: true, message: '请填写队伍头像链接' }]"
        />
-->
               <van-field name="uploader" label="队伍头像">
                 <template #input>
                   <van-uploader	v-model="avatarFile" max-count="1" upload-text="上传头像" :after-read="afterRead"  />
                 </template>
                </van-field>

        <van-field
            is-link
            readonly
            name="datetimePicker"
            label="过期时间"
            :placeholder="addTeamData.expireTime??'点击选择过期时间'"
            @click="showPicker = true"
        />

        <van-popup v-model:show="showPicker" position="bottom">
          <van-datetime-picker
              v-model="addTeamData.expireTime"
              @confirm="showPicker = false"
              type="datetime"
              title="选择过期时间"
              :min-date="currentDate"
          />
        </van-popup>

        <van-field name="stepper" label="最大人数">
          <template #input>
            <van-stepper v-model="addTeamData.maxNum" max="10" min="2"/>
          </template>
        </van-field>

        <van-field name="radio" label="队伍状态">
          <template #input>
            <van-radio-group v-model="addTeamData.status" direction="horizontal">
              <van-radio name="0">公开</van-radio>
              <van-radio name="1">私有</van-radio>
              <van-radio name="2">加密</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <van-field v-if="Number(addTeamData.status)===2"
                   v-model="addTeamData.teamPassword"
                   type="password"
                   name="teamPassword"
                   label="队伍密码"
                   placeholder="请填写队伍密码"
                   :rules="[{ required: true, message: '请填写队伍密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<style scoped>

</style>